<html>
    <head>
        <title>从零开始写一个简单路由</title>
    </head>
    <body>
        <script>
             // 二、从零开始简单的路由
                         /*
                             如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：
                         */
                         const NotFund = {template:'<p>Page not found</p>'}
                                const Home = {template:'<p>home page</p>'}
                                const About ={template:'<p>about page</p>'}

                                const routes={
                                    '/':Home,
                                    '/about':About
                                }

                                new Vue({
                                    el:'#app',
                                    data:{
                                        currentRoute:window.location.pathname
                                    },
                                    computed:{
                                        ViewComponent(){
                                            return routes[this.currentRoute] || NotFund
                                        }
                                    },
                                    render(h){
                                        return h(this.ViewComponent)
                                    }
                                })


                         /*
                             结合HTML5 History API，你可以建立一个麻雀虽小但是武藏俱全的客户端路由。

                             可以直接看实例应用： https://github.com/chrisvfritz/vue-2.0-simple-routing-example
                         */
        </script>
    </body>
</html>